<template>
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="title">
                <h4>{{data.title}}</h4>
            </div>
            <my-operation :data="data"></my-operation>
            <hr />
            <div class="content" v-html="data.content"></div>
            <hr />
            <div class="footer">
                <div class="pull-left">
                    <span>标签</span>
                    <Tag v-for="tag in data.tags" :color="tag.color">{{tag.cname}}</Tag>
                </div>
                <div class="pull-right">
                    <router-link  v-bind:to="{path:'/article/' + data.id}"><span @click="addView(data.id)">查看全文</span>>></router-link>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import myOperation from './Operation'
export default {
    data() {
        return {

        }
    },
    methods: {
          addView(id) {
                var _this = this
                $.ajax({
                    type: 'POST',
                    url: 'http://127.0.0.1:5000/api/article/addview',
                    data: {
                        fidno: id
                    },
                    crossDomain: true,
                    async: true,
                    dataType: 'json',
                    success: function(res) {

                    },
                    error: function(res) {
                        console.log(res)
                    }
                })
            }
    },
    props: {
        data: ''
    },
    components: {
        myOperation
    }
}
</script>
<style>
.title,
.top,
.operation,
.content {
    float: left;
    clear: both;

}
.footer{
    clear: both

}

.operation {
    padding-left: 0
}

.content {
    text-indent: 2em;
    text-align: left;
}
hr{
    clear: both;
}
</style>